<template>
  <div class="reserveCf">
    <header-tit :title="'预定会议'" v-if="isReserveCf"></header-tit>
    <div class="content">
      <el-form :model="reserveData" :rules="rules" ref="reserveCf">
        <el-form-item label="会议名称" prop="cf_name">
          <el-input v-model="reserveData.cf_name"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="cf_start_time" class="startTime">
          <div class="timepart">
            <el-date-picker
              v-model="dateData.startDate"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              :picker-options="dateData.startOption"
              value-format="timestamp"
              :clearable="false"
              @change="setLimit($event, 1)"
            >
            </el-date-picker>
            <el-time-select
              class="timeSelect"
              v-model="reserveData.cf_start_time"
              :picker-options="dateData.startPickerOptions"
              placeholder="选择时间"
              :clearable="false"
            >
            </el-time-select>
          </div>
        </el-form-item>
        <el-form-item label="结束时间" prop="cf_end_time" class="endTime">
          <div class="timepart">
            <el-date-picker
              v-model="dateData.endDate"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              :picker-options="dateData.endOption"
              value-format="timestamp"
              :clearable="false"
              @change="setLimit($event, 2)"
            >
            </el-date-picker>
            <el-time-select
              class="timeSelect"
              v-model="reserveData.cf_end_time"
              :picker-options="dateData.endPickerOptions"
              placeholder="选择时间"
              :clearable="false"
            >
            </el-time-select>
          </div>
        </el-form-item>
        <el-form-item
          label="入会密码"
          class="checkedItem"
          :class="isInputCfPassWord ? 'error' : ''"
        >
          <div :class="reserveData.cf_need_password ? 'mb20' : ''">
            <el-checkbox v-model="reserveData.cf_need_password"></el-checkbox>
            <span class="checkName">开启会议密码</span>
          </div>
          <el-input
            v-if="reserveData.cf_need_password"
            type="password"
            v-model.trim="reserveData.cf_password"
            maxlength="6"
            @blur="isInputCfPassWord = !(reserveData.cf_password.length === 6)"
          ></el-input>
          <span v-if="reserveData.cf_need_password && isInputCfPassWord" class="errorText"
            >请设置6位数密码</span
          >
        </el-form-item>
        <el-form-item label="会议人数上限" prop="cf_nop">
          <el-select v-model="reserveData.cf_nop" placeholder="请选择上限人数">
            <el-option
              v-for="item in personNumList"
              :value="item"
              :label="item"
              :key="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划参会人">
          <div class="peopleList">
            <div class="searchBox">
              <div class="search flex-start">
                <span>{{ $store.state.user.userInfo.user_name }}</span>
                <input
                  type="text"
                  placeholder="搜索"
                  @focus="toggleShowSearchBox"
                  @blur="toggleShowSearchBox"
                />
              </div>
              <div class="searchContent" v-if="showSearchBox">
                <header>
                  <p>你可能想找</p>
                </header>
                <div class="userList" v-if="searchData.length">
                  <single-record
                    v-for="item in searchData"
                    :key="item.id"
                    :name="item.name"
                    :id="item.id"
                    :src="item.src"
                  ></single-record>
                </div>
                <div class="nosearch" v-else>暂无搜索结果</div>
              </div>
            </div>
            <ul class="selectedList self_scroll">
              <li
                class="flex-start"
                v-for="item in selectedList"
                :key="item.user_id"
              >
                <span>{{ item.user_name }}</span>
                <img
                  src="@/assets/message/close.png"
                  alt=""
                  class="cp"
                  @click="deleteUser(item.user_id)"
                />
              </li>
            </ul>
          </div>
          <span class="itemOperation cp" @click="showAddMember"
            >添加参会人</span
          >
        </el-form-item>
        <el-form-item label="会议文档" class="checkedItem">
          <el-checkbox v-model="reserveData.cf_allow_add_file"></el-checkbox>
          <span class="checkName">允许成员上传文档</span>
          <span class="itemOperation cp" @click="showFileDialog"
            >已上传{{ cf_file.length }}个文档</span
          >
        </el-form-item>
        <el-form-item label="会议设置" class="checkedItem">
          <div class="checkpart">
            <el-checkbox v-model="reserveData.cf_auto_mutex"></el-checkbox>
            <span class="checkName">成员入会时静音</span>
          </div>
          <div class="checkpart">
            <el-checkbox v-model="reserveData.cf_allow_unmutex"></el-checkbox>
            <span class="checkName">允许成员自我解除静音</span>
          </div>
          <div class="checkpart">
            <el-checkbox v-model="reserveData.cf_lock"></el-checkbox>
            <span class="checkName">锁定会议</span>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="reserveBtn flex-center cp" @click="reserveCf">确定</div>
    <add-group-dialog ref="addCfMember"></add-group-dialog>
    <file-dialog
      v-if="showfileBox"
      @closeMaxDialogBox="closeFileBox"
    ></file-dialog>
  </div>
</template>

<script>
import addGroupDialog from '@/components/searchBox/components/addGroupDialog'
import singleRecord from '@/components/searchBox/components/singleRecord'
import headerTit from '../headerTit'
import moment from 'moment'
export default {
  components: {
    headerTit,
    singleRecord,
    addGroupDialog
  },
  data () {
    return {
      dateData: {
        startOption: {
          // 禁选的开始时间
          disabledDate: time => {
            // 开始时间日期范围
            return time.getTime() < +moment().subtract(1, 'd')
          }
        },
        endOption: {
          // 禁选的结束时间
          disabledDate: time => {
            // 结束时间日期范围 最久24h
            return (
              time.getTime() <
                +moment(moment(this.dateData.startDate).format('YYYY-MM-DD')) ||
              time.getTime() > +moment(this.dateData.startDate).add(1, 'd')
            )
          }
        },
        startDate: '', // 会议开始日期
        endDate: '', // 会议结束日期
        startPickerOptions: {
          // 开始时间时刻配置
          start: '00:00',
          step: '00:15',
          end: '23:45',
          minTime: '',
          maxTime: ''
        },
        endPickerOptions: {
          // 结束时间时刻配置
          start: '00:00',
          step: '00:15',
          end: '23:45',
          minTime: '',
          maxTime: ''
        }
      },
      personNumList: [100, 200, 300],
      reserveData: {
        cf_allow_add_file: true, // 是否允许成员上传文档
        cf_allow_unmutex: true, // 允许成员解除静音
        cf_auto_mutex: true, // 成员入会静音
        cf_lock: false, // 锁定会议
        cf_need_password: false, // 是否需要密码
        cf_start_time: '', // 会议开始时间
        cf_end_time: '', // 会议结束时间
        cf_host: this.tools.getUserId(), // 主持人
        cf_name: this.$store.state.user.userInfo.user_name + '的会议', // 会议名称
        cf_nop: 100, // 会议人数上限
        cf_password: '', // 会议密码
        cf_sponsor: this.tools.getUserId() // 发起人
      },
      rules: {
        cf_name: [
          { required: true, message: '请输入会议名称', trigger: 'blur' }
        ],
        cf_start_time: [
          { required: true, message: '请选择开始时间', trigger: 'blur' }
        ],
        cf_end_time: [
          { required: true, message: '请选择结束时间', trigger: 'blur' }
        ],
        cf_nop: [{ required: true, message: '请选择人数上限', trigger: 'blur' }]
      },
      searchData: [
        // 参会人列表搜索数据
        // { id: 0, name: '吗达拉', src: require('@/assets/test/nzs.png') },
        // { id: 1, name: '哈希拉马', src: require('@/assets/test/nzs.png') }
      ],
      showSearchBox: false, // 是否显示参会人列表搜索框
      showfileBox: false, // 展示文档框
      isInputCfPassWord: false // 是否显示密码未填提示
    }
  },
  mounted () {
    this.isReserveCf && this.initData()
  },
  computed: {
    isReserveCf () { // 是否为预定会议页面
      return this.$route.path === '/conference/reserveCf'
    },
    editData () { // 待办会议编辑数据
      return this.$store.state.conference.agendaCfData.editData
    },
    finallyStartTime () {
      // 最终开始时间(传参)
      return moment(
        moment(this.dateData.startDate).format('YYYY-MM-DD') +
          ' ' +
          this.reserveData.cf_start_time,
        'YYYY-MM-DD HH:mm'
      )
    },
    finallyEndTime () {
      // 最终结束时间(传参)
      return moment(
        moment(this.dateData.endDate).format('YYYY-MM-DD') +
          ' ' +
          this.reserveData.cf_end_time,
        'YYYY-MM-DD HH:mm'
      )
    },
    isOver24 () {
      // 结束时间大开始时间24h
      return (
        +moment(this.finallyEndTime) - +moment(this.finallyStartTime) >
        24 * 60 * 60 * 1000
      )
    },
    plan_participant () { // 预定人员
      return this.selectedList.map(item => item.user_id).concat(this.tools.getUserId())
    },
    cf_file () { // 会议文档
      return this.$store.state.conference.cfFileList.map(item => item.file_id)
    },
    // 参会人列表
    selectedList () {
      return this.$store.state.conference.reserveCfData.selectedList
    }
  },
  watch: {
    finallyStartTime: {
      // 开始时间决定结束时间
      handler (val) {
        if (+moment(val) >= +moment(this.finallyEndTime)) {
          // 开始时间晚于结束时间
          this.setEndTime()
        } else {
          if (this.isOver24) {
            this.setEndTime()
          }
        }
      }
    },
    'dateData.endDate': {
      // 结束时间限定
      handler (val) {
        this.setEndTick()
      }
    },
    editData: {
      deep: true,
      immediate: true,
      handler (val) {
        if (val && !this.isReserveCf) { // 为待办会议的编辑页时  回显数据
          this.reserveData = { ...val }
          this.dateData.startDate = +moment(val.cf_start_time)
          this.dateData.endDate = +moment(val.cf_end_time)
          this.reserveData.cf_start_time = moment(val.cf_start_time).format('HH:mm')
          this.reserveData.cf_end_time = moment(val.cf_end_time).format('HH:mm')
          const list = val.plan_participant.filter(item => !this.tools.isSelf(item)).map(item => {
            return { user_id: item, user_name: this.$store.state.chatInformation.userList[item].user_name }
          })
          this.$store.commit('conference/set_resCf_selectedList', {
            list,
            type: 'set'
          })
          this.setLimit(this.finallyStartTime, 1)
          this.setLimit(this.finallyEndTime, 2)
        }
      }
    }
  },
  methods: {
    initData () {
      // 表单初始化(确定预定后需要重置)
      this.reserveData = {
        cf_allow_add_file: true, // 是否允许成员上传文档
        cf_allow_unmutex: true, // 允许成员解除静音
        cf_auto_mutex: true, // 成员入会静音
        cf_lock: false, // 锁定会议
        cf_need_password: false, // 是否需要密码
        cf_start_time: '', // 会议开始时间
        cf_end_time: '', // 会议结束时间
        cf_host: this.tools.getUserId(), // 主持人
        cf_name: this.$store.state.user.userInfo.user_name + '的会议', // 会议名称
        cf_nop: 100, // 会议人数上限
        cf_password: '', // 会议密码
        cf_sponsor: this.tools.getUserId() // 发起人
      }
      // 重置文档
      this.$store.commit('conference/set_cfFileList', { list: [], type: 'set' })
      // 重置参会人列表
      this.$store.commit('conference/set_resCf_selectedList', {
        list: [],
        type: 'set'
      })
      // 初始化时间
      this.dateData.startDate = +moment()
      this.reserveData.cf_start_time = this.calcTime(
        moment().format('HH'),
        moment().format('mm')
      )
      this.setEndTime()
      this.setLimit(this.finallyStartTime, 1)
    },
    calcTime (hour, min, end) {
      // 计算时刻
      let currentHour = Number(hour)
      let currentMin = Number(min)
      if (end) {
        // 是否为结束时间
        currentMin += 15
        if (currentMin >= 60) {
          currentHour++
          currentMin = '00'
        }
      } else {
        const gapTime = min % 15
        if (gapTime) {
          if (currentMin + 15 - gapTime >= 60) {
            currentHour++
            currentMin = '00'
          } else {
            currentMin += 15 - gapTime
          }
        }
      }
      if (currentHour < 10) {
        // 时补零
        currentHour = '0' + currentHour
      }
      if (currentMin === 0) {
        // 分补零
        currentMin = '0' + currentMin
      }
      if (currentHour === 24) {
        // 结束时间自动增加到24
        currentHour = '00'
        this.dateData.endDate = +moment(this.dateData.startDate).add(1, 'days') // 结束时间的日期加1
      }
      return currentHour + ':' + currentMin
    },
    // 设置结束时间
    setEndTime () {
      this.$set(
        this.dateData,
        'endDate',
        this.dateData.startDate + 15 * 60 * 1000
      )
      this.setEndTick()
      this.setLimit(this.finallyEndTime, 2)
    },
    // 设置结束时刻
    setEndTick () {
      if (this.isOver24) {
        this.reserveData.cf_end_time = this.reserveData.cf_start_time
      } else {
        this.reserveData.cf_end_time = this.calcTime(
          this.reserveData.cf_start_time.split(':')[0],
          this.reserveData.cf_start_time.split(':')[1],
          true
        )
      }
    },
    setLimit (date, type) {
      // 判断是否选中今天 如果是今天  开始时刻重置  禁用的时段也重置
      const isToday = moment(date).get('date') === moment().get('date')
      // 判断是否和开始日期同一天
      const asStartDay =
        moment(date).get('date') ===
          moment(this.dateData.startDate).get('date') &&
        this.reserveData.cf_start_time !== this.dateData.startPickerOptions.end
      switch (type) {
        case 1: // 开始日期
          if (isToday) {
            if (!this.isReserveCf) {
              this.dateData.startPickerOptions.minTime = moment(date)
                .subtract(1, 'm')
                .format('HH:mm')
            } else {
              this.dateData.startPickerOptions.minTime = moment()
                .subtract(1, 'm')
                .format('HH:mm')
              if (moment(this.finallyStartTime) < moment()) {
              // 每次选择开始时间的日期都重新获取校准时间
                this.reserveData.cf_start_time = this.calcTime(
                  moment().format('HH'),
                  moment().format('mm')
                )
              }
            }
          } else {
            this.dateData.startPickerOptions.minTime = ''
          }
          break
        case 2: // 结束日期
          if (asStartDay) {
            this.dateData.endPickerOptions.maxTime = ''
            this.dateData.endPickerOptions.minTime = moment(this.finallyEndTime)
              .subtract(1, 'm')
              .format('HH:mm')
          } else {
            this.dateData.endPickerOptions.minTime = ''
            this.dateData.endPickerOptions.maxTime = moment(
              this.finallyStartTime
            )
              .add(1, 'm')
              .format('HH:mm')
          }
          break
      }
    },
    // 确定预定会议
    reserveCf () {
      this.$refs.reserveCf.validate(valid => {
        if (valid) {
          if (
            this.reserveData.cf_need_password &&
            this.reserveData.cf_password.length !== 6
          ) {
            this.isInputCfPassWord = true
          } else {
            const cfInfo = {
              cfFile: this.cf_file,
              planParticipant: this.plan_participant,
              cfInfo: { ...this.reserveData }
            }
            cfInfo.cfInfo.cf_start_time = moment(this.tools.time.getUTCTime(
              this.finallyStartTime
            ) + new Date().getTimezoneOffset() * 60000).format('YYYY-MM-DD HH:mm:ss')
            cfInfo.cfInfo.cf_end_time = moment(this.tools.time.getUTCTime(
              this.finallyEndTime
            ) + new Date().getTimezoneOffset() * 60000).format('YYYY-MM-DD HH:mm:ss')
            if (!this.isReserveCf) {
              this.$store.dispatch('conference/editAgendaCf', cfInfo).then(res => {
                if (res.data && res.data.code === 200) {
                  this.$router.push('/conference/agendaCf')
                } else {
                  this.$message.error(res.data.message)
                  this.dateData.startDate = +moment()
                  this.reserveData.cf_start_time = this.calcTime(
                    moment().format('HH'),
                    moment().format('mm')
                  )
                  this.setEndTime()
                  this.setLimit(this.finallyStartTime, 1)
                }
              })
              return
            }
            this.$store.dispatch('conference/reserveCf', cfInfo).then(res => {
              this.$message.success(res.message)
              this.initData()
            }).catch(err => {
              this.$message.error(err.message)
            })
          }
        }
      })
    },
    deleteUser (id) { // 删除参会列表已选择成员
      this.$store.commit('conference/set_resCf_selectedList', { list: { id }, type: 'delete' })
    },
    showAddMember () {
      // 显示添加参会人的弹框
      this.$store.commit('groups/set_selectedList', [])
      this.$store.commit('groups/set_addType', 3)
      this.$refs.addCfMember.toggleShow()
    },
    toggleShowSearchBox () {
      // 参会人列表处的搜索框显隐
      this.showSearchBox = !this.showSearchBox
    },
    showFileDialog () {
      this.showfileBox = true
    },
    closeFileBox () {
      this.showfileBox = false
    }
  }
}
</script>

<style scoped lang="scss">
.reserveCf {
  position: relative;
  .content {
    ::v-deep .el-form {
      position: relative;
      .el-form-item {
        margin-bottom: 32px;
        .checkpart {
          margin-bottom: 24px;
        }
        .checkName {
          margin-left: 12px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          color: #0D172C;
        }
        .peopleList {
          width: 480px;
          height: 180px;
          opacity: 1;
          border: 1px solid #d8dee9;
          border-radius: 3px;
          display: inline-block;
          vertical-align: top;
          padding: 8px;
          .searchBox {
            position: relative;
            .search {
              span {
                padding: 5px 8px;
                opacity: 1;
                font-size: 12px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                text-align: left;
                color: #0D172C;
                line-height: 17px;
                letter-spacing: 0px;
                background: rgba(48, 78, 236, 0.05);
                border-radius: 2px;
              }
              input {
                width: 228px;
                height: 28px;
                font-size: 12px;
                color: #0D172C;
                line-height: 28px;
                border: none;
                padding-left: 16px;
              }
            }
            .searchContent {
              width: 360px;
              height: 360px;
              background-color: #fff;
              position: absolute;
              z-index: 2;
              top: 30px;
              border-radius: 4px;
              box-shadow: 0px 4px 24px 0px #d8dee9;
              padding: 8px 15px;
              header {
                p {
                  line-height: 25px;
                  height: 25px;
                  opacity: 1;
                  font-size: 12px;
                  font-family: PingFangSC, PingFangSC-Regular;
                  font-weight: 400;
                  text-align: left;
                  color: #9eaac4;
                  border-bottom: 1px solid #ebedf3;
                }
              }
              .nosearch {
                margin-top: 60px;
                height: 17px;
                font-size: 12px;
                text-align: center;
                color: #5f7196;
                line-height: 17px;
              }
            }
          }
          ul.selectedList {
            margin-top: 8px;
            height: 320px;
            li {
              padding: 8px;
              float: left;
              background: rgba(48, 78, 236, 0.05);
              border-radius: 2px;
              margin: 0 8px 8px 0;
              span {
                opacity: 1;
                font-size: 12px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                text-align: left;
                color: #0D172C;
                letter-spacing: 0px;
                height: 17px;
                line-height: 17px;
              }
              img {
                margin-left: 8px;
                height: 12px;
              }
            }
          }
        }
        .itemOperation {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-decoration: underline;
          text-align: left;
          color: #304eec;
          margin-left: 20px;
        }
      }
      .startTime.el-form-item {
        position: absolute;
        top: 72px;
        left: 0;
        margin-bottom: 0;
      }
      .endTime.el-form-item {
        padding-left: 650px;
      }
      .checkedItem.el-form-item {
        .el-form-item__label,
        .el-form-item__content {
          line-height: 14px;
        }
        .errorText {
          position: absolute;
          height: 17px;
          font-size: 12px;
          font-family: PingFangTC, PingFangTC-Regular;
          font-weight: 400;
          color: #ff3e6d;
          line-height: 17px;
          top: 80px;
          left: 0;
        }
      }
      .error.el-form-item {
        .el-input {
          .el-input__inner {
            border-color: #f56c6c;
          }
        }
      }
      @media screen and (max-width: 1205px) {
        .startTime.el-form-item {
          position: unset;
          margin-bottom: 32px;
        }
        .endTime.el-form-item {
          padding-left: 0;
        }
      }
      .el-form-item__label {
        width: 200px;
      }
      .el-form-item__content {
        float: left;
      }
      .el-input {
        width: 400px;
      }
      .el-input__inner {
        padding-left: 12px;
      }
      .timepart {
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 268px;
        }
        .timeSelect.el-date-editor.el-input,
        .timeSelect.el-date-editor.el-input__inner {
          margin-left: 12px;
          width: 120px;
        }
        .el-input__prefix {
          left: unset;
          right: 8px;
        }
      }
    }
  }
  .reserveBtn {
    position: absolute;
    bottom: 36px;
    left: 200px;
    width: 200px;
    height: 40px;
    background: linear-gradient(316deg, #4a53ef, #6971fe 100%);
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #ffffff;
  }
}
</style>
